// * 我已提供了相关的素材图片，请完成相关的html页面布局部分
// * 果树从种子到成熟共分5级，每级所需的浇水量逐步增长
// * 每次浇水提示给用户到下一级剩余的百分比，升级后显示新图片
// * 用class思想完成
// * 完成以上用户交互操作，和界面的功能
// * 如果已经达到最高级，则显示结束，并不能继续浇水
// * 如果能力可以胜任，请添加浇水的动画效果

// 果树
class Tree {
  // 溢出的经验值
  static EXPS = [100, 150, 210, 280, 390]
  #level = 1
  #exp = 0
  #type = 0
  constructor() {
    this.plant = document.querySelector('.plant')
    this.pot = document.querySelector('.demo-pot')
    this.water = document.querySelector('.water')
    this.h1 = document.querySelector('h1')
    this.pot.addEventListener('click', this.handleClick.bind(this))

    this.pot.querySelector('img').addEventListener('animationend', this.handleAnimationEnd)
    this.render()
  }

  handleClick() {
    if (this.#level === 6) return
    this.pot.classList.add('demo-pot-animation')
  }
  handleAnimationEnd = () => {
    this.water.classList.add('show')
    setTimeout(() => {
      this.pot.classList.remove('demo-pot-animation')
      this.water.classList.remove('show')
      this.watering(130)//浇水量
      this.render()
    }, 500);
  }
  // accelerate() {
  //   if (this.#exp < Tree.EXPS[this.#type]) {
  //     this.#exp += 10
  //   } else if (this.#exp = Tree.EXPS[this.#type]) {
  //     this.#exp = 10
  //     if (this.#type !== 4) {
  //       this.#type += 1
  //     }
  //     if (this.#level !== 5) {
  //       this.#level += 1
  //     } else if (this.#level === 5 && this.#exp === 390) {
  //       this.#exp === 390
  //       this.#level === 6
  //       return
  //     }
  //   } else {
  //     return '已经达到最高级,游戏结束'
  //   }
  // }
  // toString() {
  //   return `当前等级：${this.#level},当前经验：${this.#exp},距离下一级还差${}`
  // }

  //浇水
  watering(amount  /*浇水的量*/) {
    if (this.#level < 6) {
      const exp = this.#exp + amount
      const max = Tree.EXPS[this.#level - 1]
      if (exp >= max) {
        this.#level += 1
        this.#exp = 0
      } else {
        this.#exp = exp
      }
    }
  }

  render() {
    this.h1.innerText = this.toString()
    this.plant.querySelector('img').src =
      `./images/plant-${this.#level - 1}.png`
  }

  toString() {
    return (this.#level === 6 ?
      '水果成熟了，可以收获了' :
      `当前等级${this.#level},还差${((1 - this.#exp / Tree.EXPS[this.#level - 1]) * 100).toFixed(2)
      }%水量升级。`
    )
  }

}

